<script lang="ts" setup>
import img1 from './assets/111.jpg'
import img2 from './assets/222.jpg'
import img3 from './assets/十号.png'
import img4 from './assets/2222.jpg'
import img5 from './assets/微信图片_20241122134803.png'
import img6 from './assets/a16d58926e8bdc7ea29f75bc232ec5a3.webp'
import img7 from './assets/微信图片_20241122134953.png'
import img8 from './assets/石昊清逸.jpg';
// 将图片放入数组中
const images = [img1, img2, img3, img4, img5, img6, img7, img8];
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-carousel :interval="3000" height="50vh">
          <el-carousel-item v-for="(item, index) in images" :key="index">
            <img :src="item" alt="轮播图图片" style="width:100%; height: 100%; object-fit: cover;" />
          </el-carousel-item>
        </el-carousel>
      </el-header>
      <el-main>
        <!-- 表单组件开始 -->
        <el-form label-width="100px" style="margin:auto; ">
          <el-form-item>
            <el-input v-model="account" placeholder="请输入您的账号"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; align-items: center;">
              <el-input v-model="verificationCode" placeholder="请输入验证码" style="flex: 1;"></el-input>
              <el-button type="danger" @click="getVerificationCode" style="margin-left: 10px;">获取验证码</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-input v-model="newPassword" placeholder="请输入新密码" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 400px;" @click="submitForm">提交修改</el-button>
          </el-form-item>
        </el-form>
        <!-- 表单组件结束 -->
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const account = ref('');
    const verificationCode = ref('');
    const newPassword = ref('');

    const getVerificationCode = () => {
      // 这里添加获取验证码的逻辑，例如发送请求
      console.log('获取验证码');
    };

    const submitForm = () => {
      // 这里添加提交表单的逻辑，例如发送请求
      console.log('提交表单', { account: account.value, verificationCode: verificationCode.value, newPassword: newPassword.value });
    };

    return {
      account,
      verificationCode,
      newPassword,
      getVerificationCode,
      submitForm
    };
  }
};
</script>

<style lang="scss" scoped>
.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: purple;
  height: 50vh;
  padding: 0; /* 去除默认的内边距 */
  margin: 0;
}

.el-carousel {
  height: 100%;
}

.el-carousel-item {
  height: 100%;
}

.el-main {
  background-color: white;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-form {
  margin: auto;
}

</style>

